import { Typography, Space, Card, Row, Col, Tag } from 'antd'
import { motion } from 'framer-motion'
import {
  ExperimentOutlined,
  CalculatorOutlined,
  ClockCircleOutlined,
  OrderedListOutlined,
  TeamOutlined,
} from '@ant-design/icons'

const { Title, Text, Paragraph } = Typography

const TECH_STACK = [
  { name: 'React', color: 'blue' },
  { name: 'TypeScript', color: 'geekblue' },
  { name: 'Ant Design', color: 'purple' },
  { name: 'UnoCSS', color: 'cyan' },
  { name: 'React Router', color: 'red' },
  { name: 'Framer Motion', color: 'orange' },
  { name: 'ahooks', color: 'green' },
]

const COMPONENTS = [
  {
    title: 'BMI 计算器',
    icon: <CalculatorOutlined className="text-blue-500" />,
    description: '输入身高体重，计算 BMI 指数并给出健康建议',
  },
  {
    title: '计数器',
    icon: <ClockCircleOutlined className="text-green-500" />,
    description: '简单的计数器，支持开始、暂停和重置功能',
  },
  {
    title: '倒计时',
    icon: <ClockCircleOutlined className="text-orange-500" />,
    description: '选择目标日期，实时显示剩余时间',
  },
  {
    title: '待办清单',
    icon: <OrderedListOutlined className="text-purple-500" />,
    description: '任务管理工具，支持添加、完成和删除任务',
  },
  {
    title: '喝酒游戏',
    icon: <TeamOutlined className="text-red-500" />,
    description: '随机选择参与者的小游戏，支持速度调节',
  },
]

const Home = () => {
  return (
    <Space direction="vertical" size="large" className="w-full">
      {/* 头部区域 */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center"
      >
        <Title className="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent inline-block">
          myReact
        </Title>
        <Paragraph className="text-gray-500 text-lg">
          一个使用现代技术栈构建的 React 练习项目
        </Paragraph>
        <Space size={[4, 8]} wrap className="justify-center">
          {TECH_STACK.map(tech => (
            <Tag key={tech.name} color={tech.color}>
              {tech.name}
            </Tag>
          ))}
        </Space>
      </motion.div>

      {/* 组件介绍 */}
      <Title level={2} className="text-center">
        <ExperimentOutlined className="mr-2" />
        组件展示
      </Title>
      <Row gutter={[16, 16]}>
        {COMPONENTS.map((component, index) => (
          <Col xs={24} sm={12} md={8} key={component.title}>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
            >
              <Card
                hoverable
                className="text-center h-full"
              >
                <Space direction="vertical" size="middle" className="w-full">
                  <div className="text-4xl">
                    {component.icon}
                  </div>
                  <Title level={4} className="!mb-0">
                    {component.title}
                  </Title>
                  <Text type="secondary">
                    {component.description}
                  </Text>
                </Space>
              </Card>
            </motion.div>
          </Col>
        ))}
      </Row>
    </Space>
  )
}

export default Home 